<!DOCTYPE html>
<html>
<head>
	<title>loanTimeManage.html</title>

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="this is my page">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="../../../plugins/bootstrap/css/bootstrap.min.css"
		type="text/css"></link>
	<!-- <link rel="stylesheet" href="../../../plugins/FlatUI/dist/css/flat-ui.css"
		type="text/css"></link> -->
	<link rel="shortcut icon" href="../../../plugins/FlatUI/dist/img/favicon.ico">
	<link rel="stylesheet" href="../../../css/style.css">
	<script type="text/javascript" src="../../../js/jquery.js"></script>
	<script type="text/javascript" src="../../../plugins/FlatUI/dist/js/flat-ui.js"></script>
	<script type="text/javascript" src="../../../plugins/bootstrap/js/messager.js"></script>
	<script type="text/javascript" src="../../../js/base.js"></script>
	  <script src="../../../js/template.js"></script>
	<script src="../../../js/bootstrap-paginator.js"></script>
	<script src="../../../js/bootstrap-mypaginator.js"></script>
	
	<script type="text/javascript">
	//分页查询
	function ajaxLoadData(data){
		$.ajax({
			url:commonurl+"/selectAllPeriod.period",
			type:"POST",
			data:data,
			dataType:"json",
			success:function(data){
				if(data.success){
				obj=data.obj;		
				$('#page_no').val(data.obj.pageNo);
			/* 	obj.list.forEach(function(value,index){
						value.houseType=value.houseType.split(",");
						value.createTime=new Date(value.createTime) ;
						value.createTime=value.createTime.getFullYear() + "年" + (value.createTime.getMonth() + 1) + "月" + value.createTime.getDate() + "日 " + value.createTime.getHours() + "点" + value.createTime.getMinutes() + "分" + value.createTime.getSeconds() + "秒";
				}) */
				var datas={
	                	sources:obj.list,
	                	commonurlimg:commonurlimg
	            	};
				$("#periodContent").html(template("periodTemplate",datas));
			/* 	obj.list.forEach(function(value,index){
					if(value.status==-1){
				 		$("."+value.id).html("已删除");
				 		$("#"+value.id).html("");
					}
				}) */
				myPaginatorFun("myPages", obj.pageNo, obj.pages);
			}else{
				alert(data.msg);
			}
			}

		})
	}
	
	$(function(){
		//刚进页面加载数据
	 	ajaxLoadData({
			
			pageNo:1
		}); 
		myoptions.onPageClicked = function(event, originalEvent, type, page) {
			ajaxLoadData({
				pageNo:page
			});
		};
		
		
	    $("#addPeriodBtn").click(function(){
	console.log($("#loanTimeName4Add").val()+"###");

	        $.ajax({
	            url:commonurl+"/addPeriod.period",
	            type:"POST",
	            data:{ "period":$("#loanTimeName4Add").val(),
	         
	                   

	            },
	            dataType:"json",
	            success:function(data){
	            	alert(data.msg);
	            	$('#proAdd').modal('hide');
	            	location.reload();
	            	
	               // if(!data.success){
	                    //alert(data.msg);
	                 //   return;
	               // }
	                //var obj = data.obj;
	                //obj.list.forEach(function(value,index){
	                    // value.houseType=value.houseType.split(",");
	                    // value.houseState=value.houseState.split(",");
	                    // value.floorInfo=value.floorInfo.split(",");
	                    // value.updateTime=new Date(value.updateTime) ;
	                    // value.updateTime=value.updateTime.getFullYear() + "年" + (value.updateTime.getMonth() + 1) + "月" + value.updateTime.getDate() + "日 " + value.updateTime.getHours() + "点" + value.updateTime.getMinutes() + "分" + value.updateTime.getSeconds() + "秒";
	               // })
	                // var datas={
	                //     sources:obj.list,
	                //     total:obj.total,
	                //     commonurlimg:commonurlimg
	                // };
	                // $(".houseList").html(template("detailList",datas));
	                // myPaginatorFun("myPages", obj.pageNo, obj.pages);
	            }

	        })
	    });
	    
	    
	      $("#modifyPeriodClick").click(function(){
		    	
		   

		        $.ajax({
		            url:commonurl+"/updatePeriod.period",
		            type:"POST",
		            data:{ "periodId":$("#loanTimeId4Modify").val(),
		            	   "periodName":$("#loanTimeName4Modify").val()
		                  

		            },
		            dataType:"json",
		            success:function(data){
		            	alert(data.msg);
		            	$('#proModify').modal('hide');
		            	ajaxLoadData({
		    				pageNo:$('#page_no').val()
		    			})
		        
		            }

		        })
		    });
	})
	
	
	
	
	</script>
	
	
	
	<script type="text/javascript">
		function modify(name,id)
		{
			$("#loanTimeId4Modify").val(id);
			$("#loanTimeName4Modify").val(name);
			$('#proModify').modal();
		}
		
		function changeStatus(id,status)
		{
			 $.ajax({
		            url:commonurl+"/updatePeriodStatus.period",
		            type:"POST",
		            data:{ "periodId":id,
		            	   "status":status
		                  

		            },
		            dataType:"json",
		            success:function(data){
		            	alert(data.msg);
		            	ajaxLoadData({
		    				pageNo:$('#page_no').val()
		    			})
		        
		            }

		        })
		}
		
		
	</script>
</head>

<body style="padding: 5px 10px;">
	 <input type="hidden"  id="page_no" />

	<div class="panel panel-primary">
	  <div class="panel-heading">
	    <h3 class="panel-title">贷款周期管理</h3>
	  </div>
	  <div class="panel-body">
	  		<a  href="javascript:;" class="btn btn-primary btn-default" data-toggle="modal" data-target="#proAdd">
	  			添加
	  			<span class="glyphicon glyphicon-plus"></span>
	  		</a>
	  		
	  		<table class="table table-hover table-bordered">
	  			<thead>
	  				<tr>
	  					<th>贷款周期ID</th>
	  					<th>周期</th>
	  					<th>状态</th>
	  					<th>操作</th>
	  				</tr>
	  			</thead>
	  			<tbody id="periodContent">
	  	<script id="periodTemplate" type="text/html">
	  			{{each sources as i}}
	  			
	  			
		  			<tr> 	 	 	 	 	 
		  				<td>{{i.id}}</td>
		  				<td>
		  					{{i.periodName}}
		  				</td>
		  				<td>{{if i.periodStatus == 1}} 启用 
                        {{else}} 禁用 {{/if}}</td>
		  				<td>
		  					<a class="btn btn-primary  btn-xs btn-warning" href="javascript:;" onclick="modify('{{i.periodName}}','{{i.id}}')">
		  						修改
		  						<span class="glyphicon glyphicon-pencil"></span>
		  					</a>

                           {{if i.periodStatus == 1}} 
                           <a class="btn btn-primary btn-xs btn-danger" href="javascript:;" onclick="changeStatus('{{i.id}}','0')">
		  						禁用
		  						<span class="glyphicon glyphicon-remove"></span>
		  					</a> 
                             {{else}} 
		  					<a class="btn btn-primary btn-xs btn-success" href="javascript:;" onclick="changeStatus('{{i.id}}','1')">
		  						启用
		  						<span class="glyphicon glyphicon-ok"></span>
		  					</a>
                            {{/if}}
		  					
		  				</td>
		  			</tr>
                 {{/each}}
</script>
		  		<!-- 	<tr> 	 	 	 	 	 
		  				<td>123</td>
		  				<td>
		  					12个月
		  				</td>
		  				<td>禁用</td>
		  				<td>
		  					<a class="btn btn-primary  btn-xs btn-warning" href="javascript:;" onclick="modify('12个月','123')">
		  						修改
		  						<span class="glyphicon glyphicon-pencil"></span>
		  					</a>
		  					<a class="btn btn-primary btn-xs btn-success" href="javascript:;" onclick="changeStatus('111','1')">
		  						启用
		  						<span class="glyphicon glyphicon-ok"></span>
		  					</a>
		  				</td>
		  			</tr>
		  			<tr> 	 	 	 	 	 
		  				<td>456</td>
		  				<td>
		  					8个月
		  				</td>
		  				<td>启用</td>
		  				<td>
		  					<a class="btn btn-primary  btn-xs btn-warning" href="javascript:;" onclick="modify('8个月','456')">
		  						修改
		  						<span class="glyphicon glyphicon-pencil"></span>
		  					</a>
		  					<a class="btn btn-primary btn-xs btn-danger" href="javascript:;" onclick="changeStatus('111','0')">
		  						禁用
		  						<span class="glyphicon glyphicon-remove"></span>
		  					</a>
		  				</td>
		  			</tr> -->
	  			</tbody>
	  		</table>
	  </div>
	</div>
	<div style="text-align: center;">
						<ul id="myPages" ></ul>
					</div>
	
	
			<!-- 产品修改Modal -->
			<div class="modal fade" style="margin-top: 200px;" id="proModify" tabindex="-1" role="dialog" aria-labelledby="proModifyLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			        <form class="form-horizontal" role="form" action="">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					        <h4 class="modal-title" id="myModalLabel">周期修改</h4>
					      </div>
					      <div class="modal-body">
					      			<div class="form-group">
						              <label for="loanTimeId4Modify" class="col-lg-2 control-label">周期Id</label>
						              <div class="col-lg-10">
						                <input type="text" class="form-control" id="loanTimeId4Modify" readonly="readonly"/>
						              </div>
						            </div>
						            <div class="form-group">
						              <label for="loanTimeName4Modify" class="col-lg-2 control-label">周期</label>
						              <div class="col-lg-10">
						                <input type="text" class="form-control" id="loanTimeName4Modify"  placeholder="单位：月"/>
						              </div>
						            </div>
					      </div>
					      <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					        <input id="modifyPeriodClick" type="button" class="btn btn-primary" value="修改" />
					      </div>
           			</form>
			    </div>
			  </div>
			</div>
			<!-- 产品修改Modal -->
			
			<!-- 产品类型添加Modal -->
			<div class="modal fade" style="margin-top: 200px;" id="proAdd" tabindex="-1" role="dialog" aria-labelledby="proAddLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			        <form class="form-horizontal" role="form" action="">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					        <h4 class="modal-title" id="proAddLabel">周期添加</h4>
					      </div>
					      <div class="modal-body">
						            <div class="form-group">
						              <label for="loanTimeName4Add" class="col-lg-2 control-label">周期</label>
						              <div class="col-lg-10">
						                <input type="text" class="form-control" id="loanTimeName4Add" placeholder="单位：月">
						              </div>
						            </div>
					      </div>
					      <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					        <input id="addPeriodBtn" type="button" class="btn btn-primary" value="添加" />
					      </div>
           			</form>
			    </div>
			  </div>
			</div>
			<!-- 产品添加Modal -->
			
			
	
	
</body>
</html>
